<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 定义基础布局 -->
      <el-card class="tree-card">

        <tree-tools :tree-node="company" :is-root="true" />
        <!-- 放置树形组件 data用来展示数据  props用来配置从哪里读取-->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- 传入插槽 -->
          <!-- el-tree的插槽内容 会被循环生成 有多少个节点 就会循环生成多少次 -->
          <!-- 作用域插槽 el-tree循环每一个的时候 给插槽塞入一个数据 获取到当前循环的节点数据 -->
          <!-- <template slot-scope="{ data }"> -->
          <template v-slot="{ data }">
            <!-- 不会生成实质标签 -->
            <!--1.3 监听谁的事件就在谁的标签上写@事件名 -->
            <!-- 3绑定编辑监听事件 -->
            <tree-tools :show-dialog.sync="showDialog" :tree-node="data" @delDepts="getDepartments" @addDepts="addDepts" @editDepts="editDepts" />

          </template>

        </el-tree>
      </el-card>
    </div>
    <!-- 放置新增弹层组件  -->
    <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
  </div>
</template>

<script>
import TreeTools from './components/tree-tools'
import { getDepartments } from '@/api/departments'// 引入单独封装好的方法
import { transListToTreeData } from '@/utils'// 引入转换tree封装的方法
import AddDept from './components/add-dept.vue'// 2.3引入子组件,注册,使用

export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      // 组织架构的数据
      departs: [],
      defaultProps: {
        // 如果这里是空的  默认 label: 'label' children: "children"
        label: 'name'
      },
      company: {},
      showDialog: false, // 显示弹层
      node: null, // 初始定义添加子部门的数据
      loading: false // 定义一个进度条变量
    }
  },
  created() {
    this.getDepartments() // 调用自身的方法
  },
  methods: {
    // 定义一个方法
    async getDepartments() {
      this.loading = true // 打开进度条
      const result = await getDepartments()
      // this.departs = result.depts // 将获取到的值赋值到departs
      this.departs = transListToTreeData(result.depts, '') // 需要将其转化成树形结构

      this.company = {
        name: result.companyName,
        manager: '负责人',
        id: ''
      }
      // await总是会等到后面的promise进行reslove
      await new Promise(resolve => setTimeout(() => resolve(), 1000))// 设置延迟时间
      this.loading = false// 执行完关闭进度条
    },
    // 2.7新增弹层打开 并且记录当前的节点
    addDepts(node) {
      this.showDialog = true
      this.node = node// node是要添加子部门的部门 要记录下来 以作备用
    },
    // 3打开编辑弹层 记录编辑的节点
    editDepts(node) {
      this.showDialog = true// 3.1 控制弹层
      this.node = node // 记录用node就可以  赋值是同步的，但是props传递到子组件是一个异步渲染的过程
      // 3.5
      this.$refs.addDept.getDepartmentDetail(node.id) // ref 可以获取子组件的实例 调用子组件的方法
    }
  }

}
</script>

<style scoped>
 .tree-card {
  padding: 30px  140px;
  font-size:14px;
 }
</style>
